import SwiftUI

struct CatalogView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Divider()
                    .background(
                        LinearGradient(colors: [.green, .blue, .purple],
                                       startPoint: .topLeading,
                                       endPoint: .bottomTrailing)
                    )
                Spacer()
                
                List {
                    Section {
                        ListRowItem(icon: "doc.plaintext", label: "Content View")
                        ListRowItem(icon: "doc.viewfinder", label: "Template View")
                        ListRowItem(icon: "square.stack.3d.forward.dottedline", label: "HStack View")
                        
                        NavigationLink {
                            VStackView()
                        } label: {
                            ListRowItem(icon: "square.stack.3d.up.fill", label: "VStack View")
                        }
                    } header: {
                        Text("UI Layouts").foregroundColor(.green).font(.headline)
                    } footer: {
                        Text("Counter: 4").font(.headline).foregroundColor(.pink)
                    }
                    
                    Section {
                        ListRowItem(icon: "button.programmable", label: "Introduction")
                    } header: {
                        Text("Button").foregroundColor(.orange).font(.headline)
                    } footer: {
                        Text("Counter: 1").font(.headline).foregroundColor(.pink)
                    }
                    
                    Section {
                        NavigationLink {
                            NoAnimationView()
                        } label: {
                            ListRowItem(icon: "moonphase.waning.crescent", label: "No Animation")
                        }
                        
                        NavigationLink {
                            WithAnimationView()
                        } label: {
                            ListRowItem(icon: "moonphase.waning.crescent", label: "With Animation")
                        }
                        
                        NavigationLink {
                            AnimationCurves()
                        } label: {
                            ListRowItem(icon: "moonphase.waning.crescent", label: "Animation Curves")
                        }
                        
                        NavigationLink {
                            AnimatableProperties_Color()
                        } label: {
                            ListRowItem(icon: "drop.keypad.rectangle.fill", label: "Animatable color")
                        }
                        
                        NavigationLink {
                            AnimatableProperties_Hue()
                        } label: {
                            ListRowItem(icon: "drop.keypad.rectangle.fill", label: "Animatable Hue")
                        }
                        
                        Group {
                            NavigationLink {
                                AnimatableProperties_Rotation()
                            } label: {
                                ListRowItem(icon: "rotate.left.fill", label: "Rotation Animation")
                            }
                            
                            NavigationLink {
                                AnimatableProperties_Anchor()
                            } label: {
                                ListRowItem(icon: "rotate.right.fill", label: "Anchor Animation")
                            }
                        }
                        
                        NavigationLink {
                            AnimatableProperties_Opacity()
                        } label: {
                            ListRowItem(icon: "eye.slash.fill", label: "Opacity Animation")
                        }
                        
                        NavigationLink {
                            AnimatableProperties_Trim()
                        } label: {
                            ListRowItem(icon: "circle.dotted", label: "Trim Animation")
                        }
                        
                        NavigationLink {
                            AnimatableProperties_Scale()
                        } label: {
                            ListRowItem(icon: "arrow.up.left.and.arrow.down.right", label: "Scale Animation")
                        }
                        
                        NavigationLink {
                            AnimationPractice()
                        } label: {
                            ListRowItem(icon: "star.fill", label: "Animation Practice")
                        }
                    } header: {
                        Text("Animation").foregroundColor(.teal).font(.headline)
                    } footer: {
                        Text("Counter: 11").font(.headline).foregroundColor(.pink)
                    }
                    
                    Section {
                        NavigationLink {
                            BasicChartView()
                        } label: {
                            ListRowItem(icon: "chart.bar.xaxis", label: "Basic bar chart")
                        }
                        
                        NavigationLink {
                            ChartWithData()
                        } label: {
                            ListRowItem(icon: "chart.bar.xaxis", label: "Chart with Data")
                        }
                        
                        NavigationLink {
                            ChartWithObject()
                        } label: {
                            ListRowItem(icon: "chart.bar.xaxis", label: "Chart with Object")
                        }
                        
                        NavigationLink {
                            OtherMarks()
                        } label: {
                            ListRowItem(icon: "chart.bar.xaxis", label: "Other marks")
                        }
                    } header: {
                        Text("Charts").foregroundColor(.green).font(.headline)
                    } footer: {
                        Text("Counter: 4").font(.headline).foregroundColor(.pink)
                    }
                    
                }
                .listStyle(.automatic)
                
                Spacer()
            }
            .navigationTitle("View catalog")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct ListRowItem: View {
    let icon: String
    let label: String
    
    var body: some View {
        HStack {
            // 示例图标
            Image(systemName: icon)
            // 文字
            Text(label)
        }
        .font(.title3)
        .padding()
    }
}
